<template>
	<view v-if="!isFrom" class="info-user-box">
		<view class="info-user-avatar-text">
			<view class="info-user-text">头像</view>
			<view class="info-user-avatar">
				<image :src="avater" mode=""></image>
			</view>
		</view>
		<view class="info-user-Account-text">
			<view class="info-user-text">账号名称</view>
			<view class="info-user-Account">{{Account}}</view>
		</view>
		<view class="info-user-nickname-text">
			<view class="info-user-text">昵称</view>
			<view class="info-user-nickname">{{nickname}}</view>
		</view>
		<view class="info-user-gender-text">
			<view class="info-user-text">性别</view>
			<view class="info-user-gender">男</view>
		</view>
		<view class="info-user-email-text">
			<view class="info-user-text">qq邮箱</view>
			<view class="info-user-email">23******99@qq.com</view>
		</view>
		<view class="info-user-university-text">
			<view class="info-user-text">所在大学</view>
			<view class="info-user-university">广东省-深圳市-深圳大学</view>
		</view>
		<view class="info-user-address-text">
			<view class="info-user-text">常住地址</view>
			<view class="info-user-address">广东省深圳市南山区xx街道34号</view>
		</view>
		<view class="button">
			<button class="mini-btn" size="mini" @click="update">修改</button>
		</view>
	</view>
	<view v-if="isFrom" class="info-user-Form">
		<view class="info-user-avatar-text">
			<view class="info-user-text">头像</view>
			<view class="info-user-avatar">
				<image src="https://c-ssl.duitang.com/uploads/blog/202206/08/20220608130125_62433.jpg" mode=""></image>
			</view>
		</view>
		<view class="Form">
			<uni-forms ref="valiForm" :rules="rules" :modelValue="alignmentFormData" label-position="top">
				<uni-forms-item label="账号昵称" required>
					<uni-easyinput v-model="alignmentFormData.name" placeholder="请输入" />
				</uni-forms-item>
				<uni-forms-item label="昵称" required>
					<uni-easyinput v-model="alignmentFormData.age" placeholder="请输入年龄" />
				</uni-forms-item>
				<uni-forms-item label="性别" required>
					<uni-data-checkbox v-model="alignmentFormData.sex" :localdata="sexs" />
				</uni-forms-item>
				<uni-forms-item label="qq邮箱" required>
					<uni-easyinput v-model="alignmentFormData.age" placeholder="请输入年龄" />
				</uni-forms-item>
				<uni-forms-item label="所在大学" required>
					<uni-easyinput v-model="alignmentFormData.age" placeholder="请输入年龄" />
				</uni-forms-item>
				<uni-forms-item label="常住地址" required>
					<uni-easyinput v-model="alignmentFormData.age" placeholder="请输入年龄" />
				</uni-forms-item>
			</uni-forms>

			<view class="button">
				<button type="primary" @click="submit('valiForm')">完成</button>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue'
	const isFrom   = ref(false)
	const valiForm = ref()
	const avater   = ref()
	const nickname = ref()
	const Account  = ref()
	const rules    = reactive({
		name: {
			rules: [{
				required: true,
				errorMessage: '姓名不能为空'
			}]
		},
		age: {
			rules: [{
				required: true,
				errorMessage: '年龄不能为空'
			}, {
				format: 'number',
				errorMessage: '年龄只能输入数字'
			}]
		}
	})
	const alignmentFormData = reactive({
		name: '',
		age: '',
		sex: 2,
	})
	const sexs = reactive([{
					text: '男',
					value: 0
				}, {
					text: '女',
					value: 1
				}])
	const update = () => {
		isFrom.value = true
	}
	getUserinfo()
	async function getUserinfo() {
	
		let {
			data
		} = await wx.getStorage({
			key: 'user'
		})
	
		Account.value  = data.phone
		nickname.value = data.nickname
		avater.value   = data.avater
	}
</script>

<style lang="less" scoped>
	.info-user-box {

		// padding: 10px;
		.info-user-avatar-text {
			padding: 15px 15px;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.info-user-avatar {
				height: 45px;
				width: 45px;

				image {
					height: 100%;
					width: 100%;
					border-radius: 100%;
				}
			}
		}

		.info-user-Account-text {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 15px;

			.info-user-Account {
				color: #a9a9a9;
				font-size: 13px;
				font-weight: 700;
			}
		}

		.info-user-nickname-text {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 15px;

			.info-user-nickname {
				color: #a1a1a1;
				font-weight: 700;
			}
		}

		.info-user-gender-text {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 15px;

			.info-user-gender {
				color: #a1a1a1;
				font-weight: 700;
			}
		}

		.info-user-email-text {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 15px;

			.info-user-email {
				color: #a1a1a1;
				font-weight: 700;
				font-size: 14px;
			}
		}

		.info-user-university-text {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 15px;

			.info-user-university {
				color: #a1a1a1;
				font-weight: 700;
				// font-size: 14px;
			}
		}

		.info-user-address-text {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 15px;

			.info-user-address {
				color: #a1a1a1;
				font-weight: 700;
			}
		}

		.button {
			margin-top: 10px;
			text-align: center;
		}
	}

	.info-user-Form {
		.info-user-avatar-text {
			padding: 15px 15px;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.info-user-avatar {
				height: 45px;
				width: 45px;

				image {
					height: 100%;
					width: 100%;
					border-radius: 100%;
				}
			}
		}

		.Form {
			margin: 15px;
		}

	}
	.Form /deep/ .uni-forms-item__label{
		color: #000;
		font-weight: 700;
	}
	.Form /deep/ .is-input-border {
		border: none;
		border-bottom: 1px solid #dcdfe6;
		margin: 0px -15px;
	}
	.Form /deep/ .uni-easyinput__content {
		
		padding-left: 90px;
	}
	.Form /deep/ .uni-data-checklist{
		padding-left: 80px;
		border-bottom: 1px solid #dcdfe6;
	}
	.Form /deep/ .button .data-v-8735cada{
		background-color: #fcf761;
		border-radius: 20px;
		border: 1px solid #d0cfb8;
		width: 50%;
		color: #000;
	}
</style>